/*
    * @module:views/budget/investBudget/budgetReckoning
    * @author:zengfx
    * @date:2020-12-17
    *  百元投资拉动
*/
<template>
  <div class="budgetRelease_container">
    <!-- <p class="m10">
      截止：
      <span>{{acctMonth}}</span>
    </p>-->
    <el-form :inline="true" :model="form" label-width="90px">
      <!-- <el-form-item label="截止:">
                <span class="mt2">{{ endTime }}</span>
            </el-form-item> -->
      <el-form-item label="区域">
        <el-cascader :options="options" ref="cascader" :show-all-levels="false" :props="{value:'areaId',label:'areaName',checkStrictly: true,expandTrigger:'hover',emitPath:false}" @change="$refs.cascader.dropDownVisible = false" size="mini" v-model="form.areaId"></el-cascader>
      </el-form-item>
      <el-form-item label="投资专项">
        <el-select v-model="form.indexCode" size="mini">
          <el-option v-for="(it, i) in codeList" :key="i" :value="it.indexCode" :label="it.indexName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账期">
        <el-date-picker size="mini" v-model="form.acctMonth" value-format="yyyyMM" type="month" placeholder="选择年月"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="handle_search()">查询</el-button>
        <el-button size="mini" type="orange" @click="handle_export()">导出</el-button>
        <el-button size="mini" @click="$router.back()" v-if="$route.query.url">返回</el-button>
      </el-form-item>
    </el-form>
    <p class="g-unit">单位: 万元</p>
    <div class="tableBox">
      <el-table height="60vh" id="table" size="mini" :header-cell-style="{ background: '#eef1f6' }" :data="tableData" v-loading="tableLoading" style="width: 100%" border>
        <el-table-column label="区域" min-width="100" prop="areaName"></el-table-column>
        <el-table-column label="年初画像">
          <el-table-column label="去年累计收入" prop="lastYearIncome" min-width="120"></el-table-column>
          <el-table-column label="本年收入预算" prop="thisYearBudget" min-width="120"></el-table-column>
          <el-table-column label="增量收入预算" prop="budgetIncIncome" min-width="120"></el-table-column>
          <el-table-column label="投资预算" min-width="120" prop="preditInvest">
          </el-table-column>
          <el-table-column min-width="240" label="百元投资拉动增量收入估算值(元)" prop="predictBytzld"></el-table-column>
          <el-table-column label="投资占收比" prop="investIncomeRation" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.investIncomeRation + "%" }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="本月完成">
          <el-table-column label="去年累计收入" prop="lastYearLjIncome" min-width="120"></el-table-column>
          <el-table-column label="本年累计收入" prop="thisYearLjIncome" min-width="120"></el-table-column>
          <el-table-column label="增量收入" prop="increaseIncome"></el-table-column>
          <el-table-column label="投资完成" prop="investLjComple"></el-table-column>
          <el-table-column min-width="200" label="百元投资拉动增量收入(元)" prop="bytzld"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { $budgetAPI } from "@/api/";
import { getSessionStorage } from "@/common/js/storage";
const exportUrl = prefixAPI.pack;
export default {
  data() {
    return {
      tableData: [],
      options: [],
      tableLoading: false,
      endTime: "",
      accountInfo: null,
      form: {
        areaId: "",
        acctMonth: "",
        indexCode: "",
      },
      area_name: "",
      codeList: [],
    };
  },
  mounted() {
    var that = this,
      time = "";

    that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));

    if (that.$route.query.url) {
      let urlDecode = window.atob(that.$route.query.url);
      let strDecode = decodeURI(urlDecode, "UTF-8");
      let params = JSON.parse(strDecode);
      that.form.areaId = params.areaId;
      that.form.acctMonth = params.acctMonth;
    } else {
      that.form.areaId = that.accountInfo.areaId;
    }

    that.initCascaderArray();
    that.getBudgetClearMaxYear();
  },
  //
  methods: {
    initCascaderArray() {
      var _this = this;
      let accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      let areaId = accountInfo.areaId;
      let lvl = accountInfo.areaLvl;
      let areaName = accountInfo.areaName;
      $budgetAPI.getCompanyByLvl(
        {
          areaId,
          lvl,
        },
        (res) => {
          this.options = [
            {
              areaName: areaName,
              areaId: areaId,
              children: [...res.content],
            },
          ];

          this.value = _this.area_id || areaId;
        }
      );
    },
    async init() {
      var that = this;
      // that.getBudgetClearDetail();
      that.getCodeList();
    },
    getCodeList() {
      var that = this;
    },
    // 获取月份
    getBudgetClearMaxYear() {
      var that = this,
        time = "";
      return new Promise((resolve) => {
        $budgetAPI.getBudgetMaxAcctMonth(
          {
            areaId: this.form.areaId,
          },
          (res) => {
            if (res.code == 0) {
              if (!that.$route.query.url) {
                that.form.acctMonth = res.content.MaxacctMonth;
              }

              $budgetAPI.getYuanProfessionalOptions(
                {
                  acctMonth: that.form.acctMonth,
                  areaId: that.form.areaId,
                },
                (res) => {
                  that.codeList = res.content.list;
                  that.form.indexCode = res.content.list[0].indexCode;
                  that.handle_search();
                }
              );

              resolve(res.content);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      });
    },
    async getBudgetClearDetail() {
      var that = this;
      let param;
      let fileId = that.$route.query.fileId || "";

      if (fileId) {
        param = {
          fileId: that.$route.query.fileId,
        };
      } else {
        param = that.form;
      }
      that.tableLoading = true;
      debugger;
      $budgetAPI.getInvestmentHundredYuan(param, (res) => {
        if (res.code == 0) {
          that.tableData = res.content.dataList;
          // let year = res.content.acctMonth.slice(0, 4);
          // let month = res.content.acctMonth.slice(4);
          // that.acctMonth1 = year + '年' + month + '月';
        }
        that.tableLoading = false;
      });
    },
    handle_search() {
      var that = this,
        param = that.form;
      that.tableLoading = true;
      $budgetAPI.getInvestmentHundredYuan(param, (res) => {
        if (res.code == 0) {
          that.tableData = res.content.dataList;
          that.tableLoading = false;
        }
      });
    },
    handle_export() {
      var areaId = this.form.areaId,
        month = this.form.acctMonth,
        code = this.form.indexCode,
        token = getCookie("token");

      window.open(
        `${exportUrl}/incomeBudget/exportInvestmentHundredYuan?areaId=${areaId}&acctMonth=${month}&indexCode=${code}&token=${token}`,
        "_self"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.budgetRelease_container {
  .contentTopTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .m10 {
    margin: 10px 0;
  }
  .mt2 {
    margin-top: 2px;
    display: inline-block;
  }
}
</style>